<template>
    <div class="container">
    <h3>消息中心</h3>
    <div class="elTabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部消息" name="全部消息">
                <div style="padding:10px 10px 15px; border-bottom:1px solid #ebeff5;position:relative; font-size: 14px" v-for="(item,index) in list" :key="index" >
                    <div style="height:30px; line-height:30px">
                        <span style="margin-right: 5px"><i :class="item.icon"></i></span><span>{{item.type}}</span><span style="color:#606266; margin-left:20px">操作人:{{item.sendUser}}</span><span style="float:right;font-size:14px;">{{item.createTime}}</span>
                    </div>
                    <div style="margin-top:10px;font-size:11px;color:#606266;">
                        <span style="margin-top:10px;">{{item.title}}：{{item.content}}</span><span style="float:right;margin-left:30px;color:blue;cursor:pointer;color:#409EFF" @click="dianji(item,index)" v-if="item.state == 0">标为已读</span>
                        <span style="float:right;margin-left:30px;" v-else></span>
                    </div>    
                </div>
            </el-tab-pane>
            <el-tab-pane label="未读消息" name="未读消息">
                <div style="padding:10px 10px 15px; border-bottom:1px solid #ebeff5;position:relative; font-size: 14px" v-for="(item,index) in list" :key="index" >
                    <div style="height:30px; line-height:30px">
                        <span style="margin-right: 5px"><i :class="item.icon"></i></span><span>{{item.type}}</span><span style="color:#606266; margin-left:20px">操作人:{{item.sendUser}}</span><span style="float:right;font-size:14px;">{{item.createTime}}</span>
                    </div>
                    <div style="margin-top:10px;font-size:11px;color:#606266;">
                        <span style="margin-top:10px;">{{item.title}}：{{item.content}}</span><span style="float:right;margin-left:30px;color:blue;cursor:pointer;color:#409EFF" @click="dianji(item,index)" v-if="item.state == 0">标为已读</span>
                        <span style="float:right;margin-left:30px;" v-else></span>
                    </div>    
                </div>
            </el-tab-pane>
            <el-tab-pane label="已读消息" name="已读消息">
                <div style="padding:10px 10px 15px; border-bottom:1px solid #ebeff5;position:relative; font-size: 14px" v-for="(item,index) in list" :key="index" >
                    <div style="height:30px; line-height:30px">
                        <span style="margin-right: 5px"><i :class="item.icon"></i></span><span>{{item.type}}</span><span style="color:#606266; margin-left:20px">操作人:{{item.sendUser}}</span><span style="float:right;font-size:14px;">{{item.createTime}}</span>
                    </div>
                    <div style="margin-top:10px;font-size:11px;color:#606266;">
                        <span style="margin-top:10px;">{{item.title}}：{{item.content}}</span><span style="float:right;margin-left:30px;color:blue;cursor:pointer;color:#409EFF" @click="dianji(item,index)" v-if="item.state == 0">标为已读</span>
                        <span style="float:right;margin-left:30px;" v-else></span>
                    </div>    
                </div>
            </el-tab-pane>
        </el-tabs>
        <a class="elTabsA" @click="biaoji">全部标记为已读</a>
    </div>
    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" @current-change="handleCurrentChange" :total="total" style="margin: 20px auto;"></el-pagination>
    </div>
</template>

<script>

import {message_list,message_update,message_getmessage,message_updateAll} from "@/request/api"
export default {
    name: 'message',
    components: {},
    data() {
        return {
            list:[],
            activeName: '全部消息',
            materialType: 2,
            pagesize:10,
            total:0,
            currentPage:1,
        };
    },
    computed: {},
    methods: {
        dianji(item,index){
            item.state = 1
            message_update(item).then((res)=>{
                // this.init()
                message_getmessage("").then((res)=>{
                    this.$store.commit("setnum",res.data)
                })
            })
        },
        handleCurrentChange(val){
            this.currentPage = val
            // this.init()
        },
        // tabs
        handleClick(tab, event) {
            if (tab.label == '全部消息') {
                this.materialType = 2
                // this.init();
            } else if(tab.label == '未读消息') {
                this.materialType = 0
                // this.init();
            } else if(tab.label == '已读消息') {
                this.materialType = 1
                // this.init();
            }
        },
        biaoji() {
            message_updateAll('').then((res) =>{
                if (res.code == 200) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration:1000
                    });
                    this.init();
                    message_getmessage("").then((res)=>{
                        this.$store.commit("setnum",res.data)
                    })
                }
            })
            // for (let i = 0; i < this.list.length; i++) {
            //     const state = this.list[i].state;
            //     if (state == 0) {
            //         this.list[i].state = 1
            //         message_update(this.list[i]).then((res)=>{
            //             this.init()
            //             message_getmessage("").then((res)=>{
            //                 this.$store.commit("setnum",res.data)
            //             })
            //         })
            //     }
            // }
        },
        init(){
           let data = {
               page:this.currentPage,
               state: this.materialType
           }
           message_list(data).then((res)=>{
                this.list = res.rows
                this.total = res.total
                for (let i = 0; i < this.list.length; i++) {
                    if(this.list[i].type == "原料入库"){
                        let key = "icon";
                        let value = 'iconfont icon81'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "库存管理"){
                        let key = "icon";
                        let value = 'iconfont icon2'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "生产管理"){
                        let key = "icon";
                        let value = 'iconfont icon3'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "检测管理"){
                        let key = "icon";
                        let value = 'iconfont icon1'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "赋码管理"){
                        let key = "icon";
                        let value = 'iconfont icon41'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "库存管理"){
                        let key = "icon";
                        let value = 'iconfont icon2'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "召回管理"){
                        let key = "icon";
                        let value = 'iconfont icon71'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "统计数据"){
                        let key = "icon";
                        let value = 'iconfont icon61'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "追溯查询"){
                        let key = "icon";
                        let value = 'iconfont iconsousuo'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "颗粒包装"){
                        let key = "icon";
                        let value = 'iconfont icon41'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "分包管理"){
                        let key = "icon";
                        let value = 'iconfont icon41'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "审核管理"){
                        let key = "icon";
                        let value = 'iconfont icon41'
                        this.list[i][key] = value;
                    }
                    if(this.list[i].type == "打印管理"){
                        let key = "icon";
                        let value = 'iconfont icon41'
                        this.list[i][key] = value;
                    }
                }
           })
        }
    },
    mounted () {
        this.init();
    },
	watch:{
		// searchName: function (val, oldVal) {
		// }
	},
};
</script>


<style scoped>
 .el-pagination{
    text-align: center;
}
.elTabs{
    position: relative;
}
.elTabs a.elTabsA{
    position: absolute;
    right: 2px;
    top: 10px;
    font-size: 12px;
    color:#409EFF;
    cursor: pointer;
}
</style>
